Color palette
This color palette comprises Primary and Accent colors that can be used for illustration or to develop your brand colors.
Palette of colors
Can be used for text and background
| red |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| pink |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| purple |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| deep-purple |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| indigo |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| blue |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| light-blue |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| cyan |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| teal |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| green |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| light-green |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| lime |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| yellow |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| amber |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| orange |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| deep-orange |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| A100 |
| A200 |
| A400 |
| A700 |
| brown |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| grey |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| blue-grey |
|---|
| 50 |
| 100 |
| 200 |
| 300 |
| 400 |
| 500 |
| 600 |
| 700 |
| 800 |
| 900 |
| white |
|---|
| black |
|---|
| primary |
|---|
| primary-contrast |
|---|
| primary-dark |
|---|
| accent |
|---|
| accent-contrast |
|---|
<mdl-badge class="material-icons mdl-color-text--grey-600 mdl-color-badge--greens" style="font-size: 32px;right: -10px;" data="1">account_box</mdl-badge><mdl-badge class="material-icons" data="♥">account_box</mdl-badge>